<!-- 首页的全部内容导航 -->
<template>
	<view class="navbar">
		<scroll-view class="scroll" scroll-x>
			<navigator v-if="isNav" :data-index="index" :url="item.path" class="scroll-nav" v-for="(item , index ) in list">
				<view class="nav-content">
					<uni-icons v-if="isIcon" style="margin-right: 3rpx;" color="#ff0000" :type="item.icon"
						size="18"></uni-icons>
					<view>{{item.name}}</view>
				</view>
			</navigator>


			<view v-if="!isNav" @click="onscrollIndex" :data-index="index" :curIndexx="curIndexx" :data-item="item"
				v-for="(item , index ) in list" :class=" curIndex == index  ? 'scroll-nav active' : 'scroll-nav'">

				<view class="nav-content">
					<uni-icons v-if="isIcon" style="margin-right: 3rpx;" color="#ff0000" :type="item.icon"
						size="18"></uni-icons>
					<view>{{item.name}}</view>
					<view v-if="item.season">第 {{item.season}} 季</view>
					<view v-if="iscomment || item.iscomment" style="margin-left: 3rpx; font-size: 20rpx;">
						{{commentCount}}
					</view>
				</view>

			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		defineProps
	} from 'vue'
	// 大类别的index值返回
	const emit = defineEmits("TagIndex")
	// 当前元素的index调色
	const curIndex = ref(0);
	const props = defineProps({
		list: {
			type: Object,
			default: [{
					id: 1,
					url: '',
					name: '预告',
					icon: 'fire'
				},
				{
					id: 1,
					url: '',
					name: '讨论',
					icon: 'chat'
				},
			]
		},
		url: {
			type: String,
			default: ''
		},
		isIcon: {
			type: Boolean,
			default: true
		},
		isNav: {
			type: Boolean,
			default: true
		},
		curIndex: {
			type: String,
			default: 0
		},
		commentCount: {
			type: Number,
			default: ''
		},
		iscomment: {
			type: Boolean,
			default: false
		},
		curIndexx: {
			type: Number,
			default: ''
		}

	})

	console.log('从父组件传递来的 curIndexx:', props.curIndexx);
	curIndex.value = props.curIndexx;
	//获取当前元素的index值
	const onscrollIndex = (e) => {
		curIndex.value = e.currentTarget.dataset.index;
		emit("TagIndex", e.currentTarget.dataset)
		// console.log("tags:", e.currentTarget.dataset.index);
	}
</script>

<style lang="scss" scoped>
	.navbar {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx;
		padding-bottom: 0;
		white-space: nowrap;

		.scroll ::-webkit-scrollbar {
			width: 0;
			height: 0;
			color: transparent;
			display: none;
		}

		scroll-view {
			white-space: nowrap;

			.scroll-nav {
				white-space: nowrap;
				margin-right: 10rpx;
				display: inline-block;
				padding: 10rpx 20rpx;
				background: #1d1d1d;
				font-size: 22rpx;
				border-radius: 15rpx;

				.nav-content {
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.active {
				// background-color: #ff0000;
				background-color: rgba(254, 0, 0, 0.3);
				color: #ff0000;

			}
		}
	}
</style>